<template>
    <div class="my-order">
        <div class="my-title">
            <div class="tab" :class="{ active: selectStatus == '' }" @click="clickStatus('')">
                全部
            </div>
            <div class="tab" :class="{ active: selectStatus == '0' }" @click="clickStatus('0')">
                待支付
            </div>
            <div class="tab" :class="{ active: selectStatus == '1' }" @click="clickStatus('1')">
                服务中
            </div>
            <div class="tab" :class="{ active: selectStatus == '2' }" @click="clickStatus('2')">
                未验收
            </div>
            <div class="tab" :class="{ active: selectStatus == '4' }" @click="clickStatus('4')">
                已完成
            </div>
        </div>

        <div class="main">
            <div v-if="orderList.length > 0" class="table-header">
                <div style="width: 370px">订单详情</div>
                <div style="width: 170px">金额</div>
                <div style="width: 140px">订单状态</div>
                <div>操作</div>
            </div>

            <div class="order-list">
                <div v-for="(item, index) in orderList" :key="index" class="order-item pointer">
                    <div class="order-id">
                        {{ changTime(item.createtime) }}
                        <span>订单号：{{ item.order_no }}</span>
                        <i v-if="item.status == 4 || item.status == 5" class="el-icon-delete dle"
                            @click.stop="delMyOrder(2, item)"></i>
                    </div>
                    <img class="lxkf" src="~/assets/images//service/icon_lxkf.png" alt="" @click="goKefu" />
                    <span class="lxmj" @click="contactService(item)">
                        <i style="font-size: 16px; color: #0073ee" class="el-icon-chat-dot-square"></i>
                        联系卖家
                    </span>
                    <span v-if="item.status == 0" class="count-down">

                        <el-statistic :value="parseInt(item.createtime) * 1000 + 1800000" time-indices format="mm:ss">
                            <template slot="prefix"> 剩 </template>
                            <template slot="suffix"> 自动关闭 </template>
                        </el-statistic>
                    </span>
                    <div class="order-info" @click="goDetail(item)">
                        <div class="order-title">
                            <div style="margin-right: 14px">
                                <el-image v-if="item.shopinfo" class="order-img" fit="cover"
                                    :src="item.shopinfo.pic.split(',')[0]" lazy></el-image>
                            </div>
                            <div class="title">
                                <div v-if="item.shopinfo">
                                    {{ item.shopinfo.name }}
                                </div>
                                <template v-if="item.serviceinfo">
                                    {{ item.serviceinfo.name }}
                                </template>
                            </div>
                        </div>
                        <div class="money">
                            {{ item.money == 0 ? "面议" : "￥" + item.money }}
                        </div>
                        <div class="order-status">
                            <span v-if="item.status == 0">待支付</span>
                            <span v-if="item.status == 1">服务中</span>
                            <span v-if="item.status == 2">待确认</span>
                            <span v-if="item.status == 3">待评价</span>
                            <span v-if="item.status == 4">已确认</span>
                            <span v-if="item.status == 5">已取消</span>
                        </div>
                        <div class="button">
                            <el-button v-if="item.status == 0" type="danger" @click="goDetail(item)" round plain
                                size="mini">
                                立即支付
                            </el-button>
                            <el-button class="mt10" v-if="item.status == 0" type="info"
                                @click.stop="delMyOrder(1, item)" round plain size="mini">
                                取消订单
                            </el-button>
                            <el-button v-if="item.status == 1 || item.status == 4" type="primary"
                                @click="goDetail(item)" round plain size="mini">
                                查看详情
                            </el-button>
                            <el-button v-if="item.status == 2" type="success" @click.stop="myserviceorder_edit(item)"
                                round plain size="mini">
                                验收服务
                            </el-button>
                            <el-button v-if="item.status == 3" type="success" @click="goDetail(item)" round plain
                                size="mini" style="width: 80px; height: 28px">
                                去评价
                            </el-button>
                        </div>
                    </div>
                </div>
                <div v-if="orderList == 0">
                    <el-empty description="暂无数据"></el-empty>
                </div>
            </div>

            <div style="text-align: center; padding-top: 30px">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit"
                    :current-page.sync="page" @current-change="changePage">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import {
    myserviceorder,
    myserviceorder_edit,
    delorder,
    closeMyOrder,
} from "@/assets/api/service";
import { getTime } from "@/assets/utils/utils";
export default {
    components: {},
    metaInfo() {
        return {
            title: "个人中心-我的订单",
            meta: [{ name: "keywords", content: "小竹,财税,小竹财税" }],
        };
    },
    data() {
        return {
            // type: null,
            orderList: [],
            selectStatus: "",

            page: 1,
            limit: 10,
            total: 0,

            getTime: getTime,

            titleColor: "#FF6900",
        };
    },
    mounted() {
        if (this.$route.query.type !== undefined) {
            this.selectStatus = this.$route.query.type;
        } else {
            this.selectStatus = "";
        }
        this.mybuyrecord();
    },
    computed: {},
    methods: {
        //时间戳转化时间
        changTime(val) {
            return this.$moment(val * 1000).format("YYYY-MM-DD HH:mm:ss");
        },

        async mybuyrecord() {
            let params = {
                page: this.page,
                pageSize: this.limit,
            };
            if (this.selectStatus) params.status = this.selectStatus;
            const res = await myserviceorder(params);
            if (res.code == 1) {
                this.orderList = res.data.serviceorderlist;
                this.total = res.data.serviceorderlistcount;
            }
        },

        // 修改分页
        changePage(page) {
            this.page = page;
            this.mybuyrecord();
        },
        clickStatus(status) {
            if (this.selectStatus == status) return;
            this.page = 1;
            this.selectStatus = status;
            this.mybuyrecord();
        },
        goVip() {
            this.$router.push({
                path: "/user/myvip",
            });
        },

        goDetail(item) {
            if (item.status == 5) return;
            this.$router.push({
                path: "/service/shoporder",
                query: {
                    orderNo: item.order_no,
                },
            });
        },

        goKefu() {
            let { href } = this.$router.resolve({
                path: "/chatlink",

            });
            window.open(href, "_blank");
        },

        async myserviceorder_edit(item) {
            let obj = {
                order_id: item.id,
                status: 3,
            };
            var _this = this;
            this.$confirm("是否确认验收服务？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(function () {
                    return myserviceorder_edit(obj);
                })
                .then((data) => {
                    _this.$message.success("验收完成");
                    _this.mybuyrecord();
                })
                .catch(function (err) { });
        },

        //删除或取消订单
        delMyOrder(type, item) {
            this.$confirm(
                type == 1 ? "确定取消此订单吗?" : "确定删除此订单吗?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    if (type == 1) {
                        this.closeMyOrder(item.id);
                    } else {
                        this.delorder(item.id);
                    }
                })
                .catch(() => { });
        },
        //取消待支付的订单
        async closeMyOrder(id) {
            let res = await closeMyOrder({ id: id });
            if (res.code == 1) {
                this.$message({
                    message: "取消成功",
                    type: "success",
                });
                this.mybuyrecord();
            } else {
                this.$message({
                    message: res.msg,
                    type: "warning",
                });
            }
        },
        //删除已取消的订单
        async delorder(id) {
            const res = await delorder({
                order_id: id,
            });
            if (res.code == 1) {
                this.$message({
                    message: "删除成功",
                    type: "success",
                });
                this.mybuyrecord();
            }
        },

        // 联系卖家
        contactService(item) {
            const token = window.localStorage.getItem('token')
            if (!token) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            this.$alert(item.serviceinfo.tel, '联系电话', {
                confirmButtonText: '确定',
                callback: action => {

                }
            });
            // localStorage.setItem("to_zim_userid", item.serviceinfo.user_id);
            // this.$router.push({
            //     path: "/service/servicechat",
            // });
        },
    },
};
</script>

<style lang="scss" scoped>
.my-order {
    background: #fff;
    margin-left: 20px;
}

.my-title {
    height: 80px;
    padding-left: 20px;
    border-bottom: 1px solid #ededed;
    display: flex;
    align-items: center;

    .tab {
        font-size: 18px;
        color: #333333;
        margin: 0 25px;
        cursor: pointer;

        &:hover {
            color: #1c87f3;
        }
    }

    .active {
        color: #1c87f3;
    }
}

.main {
    padding: 17px 45px;
}

.table-header {
    height: 55px;
    line-height: 55px;
    background: #ededed;
    box-sizing: border-box;
    padding: 0 29px;
    display: flex;
    align-items: center;

    div {
        font-size: 14px;
        color: #333333;
    }
}

.order-list {
    padding: 12px 0;
}

.order-item {
    position: relative;
    margin-bottom: 12px;
    border: 1px solid #eaeaea;

    .dle {
        position: absolute;
        top: 18px;
        right: 15px;
        display: none;
        cursor: pointer;
    }

    .order-id {
        padding-left: 29px;
        font-size: 12px;
        color: #333333;
        height: 50px;
        line-height: 50px;
        background: #f6f6f6;
        display: flex;
        align-items: center;

        span {
            color: #666666;
            padding-left: 13px;
        }
    }

    .lxkf {
        width: 83px;
        height: 23px;
        margin-left: 21px;
        cursor: pointer;
        position: absolute;
        left: 370px;
        top: 13px;
    }

    .lxmj {
        cursor: pointer;
        position: absolute;
        left: 500px;
        top: 16px;
        color: #999;
        font-size: 14px;
    }

    .count-down {
        position: absolute;
        right: 62px;
        top: 16px;
        font-size: 14px;
        color: #999;
    }

    &:hover {
        border-color: #d9ecff;

        .order-id {
            background-color: #eef7ff;
        }

        .dle {
            display: block !important;
        }
    }
}

.order-info {
    display: flex;
    align-items: center;
    padding: 15px 29px;

    .order-title {
        width: 370px;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        padding-right: 50px;
        display: flex;
        align-items: center;

        .order-img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            display: block;
        }

        .title {
            div {
                font-size: 16px;
                color: #333333;
                padding-bottom: 6px;
            }

            font-size: 12px;
            color: #666666;
        }
    }

    .money {
        width: 170px;
        font-size: 16px;
        color: #fa5151;
    }

    .order-status {
        width: 140px;
        font-size: 14px;
        color: #666666;
    }

    .button {
        width: 100px;
        position: relative;

        // height: 30px;
        // border-radius: 67px 67px 67px 67px;
        // border: 1px solid #1c87f3;
        // font-size: 14px;
        // color: #1c87f3;
        // line-height: 28px;
        // text-align: center;
        // cursor: pointer;
        // user-select: none;
        // &:hover {
        //     background-color: #1c87f3;
        //     color: #ffffff;
        // }
        // &:active {
        //     background-color: #197adb;
        // }
    }
}

::v-deep .el-button+.el-button {
    margin-left: 0;
}

::v-deep .count-down .number {
    color: rgb(255, 105, 0) !important;
}
</style>
./myserviceorder.vue